{% set locals={
  isNav: false,
  title: "微博-登录",
  isNarrow: true
} %}

{% extends './layout/layout.html' %}

{% block content %}
  <div class="container margin-top-20">
    <h1>登录</h1>
    {% if isLogin %}
      <p>
        {{userName}}
        您已成功登录，请直接访问<a href="/">首页</a>
      </p>
    {% else %}
      <form>
        <div class="form-group">
          <input type="text" class="form-control" id="input-username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
          <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
        </div>
        <button type="submit" class="btn btn-primary" id="btn-submit">登录</button>
        &nbsp;
        <a href="/register">注册账号>></a>
      </form>
    {% endif %}

  </div>
{% endblock %}

{% block js %}
  <script>
    $(function () {
      var $inputUserName = $('#input-username')
      var $inputPassword = $('#input-password')
      $('#btn-submit').click(function (e) {
        // 阻止默认的提交表单行为
        e.preventDefault()
        const userName = $inputUserName.val()
        const password = $inputPassword.val()

        // 提交数据
        ajax.post('/api/user/login', {
          userName,
          password
        }, function (err, data) {
          if (err) {
            alert(err)
            return
          }
          // http://localhost:3000/login?url=xxx
          // 比如访问的是个人页，但是没有登录，这个时候跳转到登录页面，登录后跳转到个人页
          // 跳转到指定 url 或首页
          // $.query.get()  方法依赖于jquery的一个插件  query-object.js 官网下载就可以
          var redirectUrl = $
            .query
            .get('url') || '/'
          location.href = redirectUrl
        })
      })
    })
  </script>
{% endblock js %}